<template>
  <div>
    <el-card shadow="never" style="border:none;border:1px solid #ebeef5;">
      <div slot="header">
        <img src="../../image/logo.png">
        问卷系统-{{paper.title}}
        <el-button
          type="info"
          icon="el-icon-back"
          size="mini"
          @click="$router.push({name:'papers'})"
          plain
        >返回</el-button>
      </div>
    </el-card>
    <el-card v-for="(content,index) in paper.content" :key="'paper_'+content.id">
      <div slot="header">
        <span>{{index+1}}.{{content.outline_name}}</span>
      </div>
      <el-radio-group v-model="content.answer">
        <el-radio
          :label="item.id"
          v-for="item in paper.item"
          :key="'item_'+item.id"
        >{{item.item_name}}</el-radio>
      </el-radio-group>
    </el-card>
    <div>
      <qrcode :value="msg" :options="{width:200}"></qrcode>
      <el-button type="primary" @click="save()">提交</el-button>
    </div>
  </div>
</template>

<script>
import VueQrcode from "@chenfengyuan/vue-qrcode";
export default {
  components: {
    qrcode: VueQrcode
  },
  props: ["id"],
  data() {
    return {
      paper: []
    };
  },
  created() {
    this.getPaper();
  },
  computed: {
    msg() {
      let tmp = {
        url: `${this.apiURL}/papers/${this.id}`,
        id: this.id
      };
      return JSON.stringify(tmp)
    }
  },
  methods: {
    save() {
      for (let i = 0; i < this.paper.content.length; i++) {
        if (!this.paper.content[i].answer) {
          this.$message.error(`请选择选项${i + 1}`);
          return;
        }
      }
      this.axios
        .post("/answers/add", {
          item: JSON.stringify(this.paper.item),
          content: JSON.stringify(this.paper.content),
          paper_id: this.id
        })
        .then(() => {
          this.$message.success("回答完毕!");
        })
        .catch(() => {
          this.$message.error("请勿重复作答!");
        });
    },
    async getPaper() {
      const ret = await this.axios.get(`/papers/${this.id}`);
      this.paper = ret.data.data;
    }
  }
};
</script>

<style>
</style>
